<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>游记</title>
    <link rel="stylesheet" href="css/travel_dairy.css"/>
    <link rel="stylesheet" href="css/common_style.css" />
</head>
<body>
<div class="warp">
    <div class="head ws1200">
        <div class="logo fl">
            <img src="../img/lesson_12/logo.png" alt="logo"/>
            <img src="../img/lesson_12/brand.png" alt="brand"/>
        </div>
        <ul class="nav fl">
            <li>首页</li>
            <li>地区</li>
            <li>特惠</li>
            <li>资讯</li>
            <li class="act">游记</li>
            <div class="clearfix"></div>
        </ul>
        <div class="login fr">
            <span>登录</span><span class="line">|</span><span>注册</span>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="second_head">
        <div class="ws1200">
            <div class="head_search fl">
                <p class="fl">|</p>
                <div class="icon fl">
                    <img src="img/search_icon.png" alt="搜索图标">
                </div>
                <p class="fr">|</p>
                <div class="clearfix"></div>
            </div>
            <div class="head_history fr">
                <div class="">
                    <p class="fl">|</p>
                    <div class="icon fl">
                        <img src="img/history.png" alt="历史记录">
                    </div>
                    <p class="fr">|</p>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="comment fr">
                <div class="icon fl">
                    <img src="img/comment.png" alt="历史记录">
                </div>
            </div>
            <div class="head_person fr">
                <p class="fl">|</p>
                <div class="icon fl">
                    <img src="img/person.png" alt="个人信息">
                </div>
                <p class="fr">|</p>
                <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <div class="contents_warp ws1200">
        <div class="left_column_warp fl">
            <div class="selected_article">
                <div class="font fl">精选文章</div>
                <div class="arrow fl">
                    <img src="img/right_arrow.png" alt="右箭头">
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="selected_photo">
                <div class="font fl">精选照片</div>
                <div class="arrow fl">
                    <img src="img/down_arrow.png" alt="下箭头">
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="line"></div>
            <div class="images">
                <img src="img/lake.jpg" alt="小桥流水"/>
                <div class="title-avatar-warp">
                    <div class="title-warp fl">
                        <div class="title">小桥流水</div>
                        <div class="datetime">2017年03月06日</div>
                    </div>
                    <div class="avatar fr">
                        <img src="img/avtar1.png" alt="头像">
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="images">
                <img src="img/mountain.jpg" alt="黄昏与山"/>
                <div class="title-avatar-warp">
                    <div class="title-warp fl">
                        <div class="title">黄昏与山</div>
                        <div class="datetime">2017年03月06日</div>
                    </div>
                    <div class="avatar fr">
                        <img src="img/avtar2.png" alt="头像">
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="images">
                <img src="img/ice_castle.jpg" alt="冰雪奇缘"/>
                <div class="title-avatar-warp">
                    <div class="title-warp fl">
                        <div class="title">冰雪奇缘</div>
                        <div class="datetime">2017年03月06日</div>
                    </div>
                    <div class="avatar fr">
                        <img src="img/avtar3.png" alt="头像">
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="line"></div>
            <div class="title-warps">
                <div class="title-img fl">
                    <img src="img/dusk.jpg" alt="夕阳西下"/>
                </div>
                <div class="title fl">
                    <div class="context">夕阳西下</div>
                    <div class="datetime"></div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="line"></div>
            <div class="title-warps">
                <div class="title-img fl">
                    <img src="img/bridge.jpg" alt="寻找"/>
                </div>
                <div class="title fl">
                    <div class="context">寻找</div>
                    <div class="datetime"></div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="line"></div>
            <div class="title-warps">
                <div class="title-img fl">
                    <img src="img/tower.jpg" alt="梦之旅"/>
                </div>
                <div class="title fl">
                    <div class="context">梦之旅</div>
                    <div class="datetime"></div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="line"></div>
            <div class="title-warps">
                <div class="title-img fl">
                    <img src="img/castle.jpg" alt="古堡环绕"/>
                </div>
                <div class="title fl">
                    <div class="context">古堡环绕</div>
                    <div class="datetime"></div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="line"></div>
            <div class="title-warps">
                <div class="title-img fl">
                    <img src="img/fairy%20tales.jpg" alt="梦幻童话"/>
                </div>
                <div class="title fl">
                    <div class="context">梦幻童话</div>
                    <div class="datetime"></div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="line"></div>
            <div class="about-us-warp">
                <div class="about-us">关于我们</div>
                <div class="contents">
                    <p>
                        悠游旅游是全球领先的旅游网站**，帮助旅行者发
                        现每次旅行中的更多精彩。提供超过5.7亿条点评和
                        建议，全面覆盖全球的旅游商户——超过730万个
                        住宿、航空公司、景点和餐厅信息，汇集众智帮助
                        旅行者选择吃住玩乐。悠游旅游还搜索超过200家
                        网站，帮助旅行者找到当日优惠的酒店价格并预订，
                        悠游旅游：懂得更多，订得更好，玩得更棒。
                    </p>
                </div>
                <div class="about-more">
                    了解更多
                </div>
            </div>
        </div>
        <div class="right_column_warp fr">
            <div class="selected_article_warp">
                <div class="articles">
                    <div class="title-container">
                        <div class="title fl">
                            <div class="main-title">将德国的美好时光与幸福心态定格</div>
                            <div class="sub-title">Determine the good time and happiness of Germany</div>
                        </div>
                        <div class="datetime-avatar-warp fr">
                            <div class="datetime"></div>
                            <div class="avatar-warp">
                                <div class="name fl"></div>
                                <div class="avatar fr"></div>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <img src="img/article-img1.jpg" alt="文章插图">
                    <div class="article-content">
                        喜欢洪莉，先喜欢她的语言表达，后来喜欢她的拍照功力，出了书以后又喜欢上她的文字。“浑身
                        金毛、通体雪白。”谈起老公日耳曼民族的起源，洪莉用这八个字形容他们从山林中向这个世界走
                        来的景象。我被她诗一般的语言迷住。我喜欢文字，洪莉偏偏是一个语言能力极强的人，她总是用
                        特别浅白的语言，说出抑扬顿挫的诗意
                    </div>
                    <div class="buttons">
                        <div class="continue-read">继续阅读</div>
                        <div class="other-buttons">
                        </div>
                    </div>
                </div>
                <div class="articles">
                    <div class="title-container">
                        <div class="title fl">
                            <div class="main-title">将德国的美好时光与幸福心态定格</div>
                            <div class="sub-title">Determine the good time and happiness of Germany</div>
                        </div>
                        <div class="datetime-avatar-warp fr">
                            <div class="datetime"></div>
                            <div class="avatar-warp">
                                <div class="name fl"></div>
                                <div class="avatar fr"></div>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <img src="img/article-img1.jpg" alt="文章插图">
                    <div class="article-content">喜欢洪莉，先喜欢她的语言表达，后来喜欢她的拍照功力，出了书以后又喜欢上她的文字。“浑身
                        金毛、通体雪白。”谈起老公日耳曼民族的起源，洪莉用这八个字形容他们从山林中向这个世界走
                        来的景象。我被她诗一般的语言迷住。我喜欢文字，洪莉偏偏是一个语言能力极强的人，她总是用
                        特别浅白的语言，说出抑扬顿挫的诗意。
                    </div>
                    <div class="buttons">
                        <div class="continue-read">继续阅读</div>
                        <div class="other-buttons">
                        </div>
                    </div>
                </div>
                <div class="articles">
                    <div class="title-container">
                        <div class="title fl">
                            <div class="main-title">将德国的美好时光与幸福心态定格</div>
                            <div class="sub-title">Determine the good time and happiness of Germany</div>
                        </div>
                        <div class="datetime-avatar-warp fr">
                            <div class="datetime"></div>
                            <div class="avatar-warp">
                                <div class="name fl"></div>
                                <div class="avatar fr"></div>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <img src="img/article-img1.jpg" alt="文章插图">
                    <div class="article-content">
                        喜欢洪莉，先喜欢她的语言表达，后来喜欢她的拍照功力，出了书以后又喜欢上她的文字。“浑身
                        金毛、通体雪白。”谈起老公日耳曼民族的起源，洪莉用这八个字形容他们从山林中向这个世界走
                        来的景象。我被她诗一般的语言迷住。我喜欢文字，洪莉偏偏是一个语言能力极强的人，她总是用
                        特别浅白的语言，说出抑扬顿挫的诗意
                    </div>
                    <div class="buttons">
                        <div class="continue-read fl">继续阅读</div>
                        <div class="comments fr">
                            <img src="img/comments.png" alt="评论">
                        </div>
                        <div class="likes fr">
                            <img src="img/likes.png" alt="喜欢">
                        </div>
                        <div class="star fr">
                            <img src="img/star.png" alt="收藏">
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="page_warp">
                <div class="page">
                    <div class="pre_page fl">
                        &lt&nbsp上一页
                    </div>
                    <div class="pages fl">
                        <span>1&nbsp&nbsp&nbsp&nbsp&nbsp</span>
                        <span class="blue2">2&nbsp&nbsp&nbsp&nbsp&nbsp</span>
                        <span>3&nbsp&nbsp&nbsp&nbsp&nbsp
                            4&nbsp&nbsp&nbsp&nbsp&nbsp
                            5&nbsp&nbsp&nbsp&nbsp&nbsp
                            6&nbsp&nbsp&nbsp&nbsp&nbsp
                        </span>
                    </div>
                    <div class="next_page fr">&lt&nbsp下一页</div>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="bottom">
        <div class="info">
            <p>© 2017 Leyouyou.cn 粤ICP备12345678号 粤公网安备123456789012号 粤ICP证12345<br>
                营业执照 新出网证(粤)字123号 全国统一客服电话：0000-123-456</p>
        </div>
    </div>
</div>
</body>
</html>